<template>
  <div id="selectCourse" :style="column?'flex-direction: column':'flex-direction: row'">
<!--    <div class="title">学校</div>-->
    <select-school ref="selectSchool" :class="column?'column':'row'" :sID="queryParames.sid" @selectChange="selectChange"></select-school>
<!--    <div class="title">专业</div>-->
    <el-select
      :class="column?'column':'row'"
      v-model="courseId"
      :placeholder="queryParames.sid?'请选择专业':'请先选择学校'"
      clearable
      filterable
      remote
      :remote-method="remoteMethod"
      @focus="focus"
      @change="change"
      :loading="loading"
      v-loadmore="loadmore"
    >
      <el-option
        v-for="item in courseList"
        :key="item.id"
        :label="item.mname"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { listMajor } from '@/api/curriculumSystemManagement/major'
import selectSchool from '@/views/curriculumSystemManagement/components/selectSchool'
export default {
  name: 'selectCourse',
  props:{
    placeholder:{
      type:String,
      default:'请选择'
    },
    column:{
      type:Boolean,
      default: false
    },
  },
  components:{
    selectSchool
  },
  data() {
    return {
      courseId: null,
      //学校下拉框数据
      courseList: [],
      queryParames: {
        pageNum: 1,
        pageSize: 10,
        cname: '',
        sid:null
      },
      courseTotal: 10,
      loading: false
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    /** 下拉框选中值发生改变*/
    change(e) {
      let item = {
        sid:this.queryParames.sid,
        mid:e
      }
      this.$emit('selectChange', item)
    },
    /** 下拉框搜索*/
    async remoteMethod(query) {
      const self = this
      self.queryParames.sname = query
      self.loading = true
      self.courseList = []
      self.queryParames.pageNum = 1
      await self.getCourseList()
      self.loading = false
    },
    /** 下拉框触底*/
    loadmore() {
      const self = this
      if (!self.loading) {
        self.queryParames.pageNum++
        self.getCourseList()
      }
    },
    /** 下拉框获取焦点时*/
    async focus () {
      const self = this
      self.loading = true
      self.courseList = []
      self.queryParames.pageNum = 1
      await self.getCourseList()
      self.loading = false
    },
    /** 获取专业下拉框数据*/
    async getCourseList() {
      const self = this
      if(!self.queryParames.sid){
        return
      }
      if (self.courseList.length >= self.courseTotal) {
        self.loading = false
        return
      }
      const response = await listMajor(self.queryParames)
      self.courseList = self.courseList.concat(response.rows)
      self.courseTotal = response.total
    },
    /** 选择学校*/
    selectChange(e){
      if (typeof e === 'string'){
        e = null
      }
      this.queryParames.sid = e
      this.courseId = null
      let item = {
        sid:e,
        mid:null
      }
      this.$emit('selectChange', item)
    },
    /** 重置选择的学校*/
    resetQuerySchool(){
      this.$refs.selectSchool.schoolId = null
    }
  }
}
</script>
<style scoped lang="scss">
#selectCourse{
  display: flex;
  .title{
    font-weight: bold;
    color: #666666;
    margin-right: 5px;
  }
  .row{
    margin: 0 10px 0 0;
  }
  .column{
    margin: 0 0 10px 0;
  }
}
</style>
